<template>
	<div id="all">
		<div id="left">
			<el-tab-pane
				v-for="item in classList"
				:key="item.id"
				:label="item.name"
			>
				<el-table
					ref="multipleTable"
					:data="item.exps"
					tooltip-effect="dark"
					style="width: 100%; margin-top: -40px"
					@selection-change="handleSelectionChange(scope)"
					@select="handleSelect(scope)"
				>
					<!-- <el-table-column
						type="selection"
						width="100"
						@select="handleSelect(selection, row)"
					>
					</el-table-column> -->
					<el-table-column
						label="班级"
						width="400"
						style="font-size: 20px"
					>
						<template v-slot="scope"
							><span @click="handleClick(scope.row)">
								{{ scope.row.name }}
							</span></template
						>

						<!-- <router-view></router-view> -->
					</el-table-column>
					<el-table-column label="删除">
						<template #default="scope">
							<el-popconfirm
								width="220"
								confirm-button-text="确定"
								cancel-button-text="取消"
								:icon="InfoFilled"
								icon-color="#626AEF"
								title="确定删除吗?"
								@confirm="Delete(scope.row)"
							>
								<template #reference>
									<el-button size="small" type="danger"
										>删除</el-button
									>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</div>
		<div id="right">
			<h4>导入班级目录</h4>
			<el-upload
				action="#"
				:on-preview="handlePreview"
				:on-remove="handleRemove"
				:on-exceed="handleExceed"
				:on-change="changeFile"
				accept=".xlsx, .xls"
				:limit="1"
				:auto-upload="false"
				:data="tid"
			>
				<template #trigger>
					<el-button type="primary">点击此处选择文件</el-button>
				</template>
				<el-button type="success" @click="UpdateFile" class="upload"
					>上传</el-button
				>
				<template #tip>
					<div class="el-upload__tip"> 文件大小不能超过1MB. </div>
				</template>
			</el-upload>
			<el-button text @click="table = true">点击手动上传</el-button>
			<el-drawer
				v-model="table"
				title="手动添加班级"
				direction="rtl"
				size="50%"
			>
				<span
					><el-input
						v-model="classnum_update"
						placeholder="请输班级（数字）"
				/></span>
				<span
					><el-input
						v-model="college_update"
						placeholder="请输入学院"
				/></span>
				<span
					><el-input v-model="grade_update" placeholder="请输入年级"
				/></span>
				<span
					><el-input v-model="major_update" placeholder="请输入专业"
				/></span>
				<br />
				<el-button @click="updatestudents">提交</el-button>
			</el-drawer>
		</div>
	</div>
</template>

<script setup lang="ts">
//@ts-nocheck
const table = ref(false)
import {
	getClass,
	uploadClassFile,
	handaddClass,
	delClass,
} from '../../api/request'
import { useRouter } from 'vue-router'
import { useGlobalStore } from '@/store/GlobalStore/index'
const router = useRouter()
const store = useGlobalStore()
const multipleSelection = ref([])
const tid = store.userInfo.tid
const File = ref() //保存文件
const classnum_update = ref('')
const college_update = ref('')
const grade_update = ref('')
const major_update = ref('')
const tid_update = ref('')
const term = store.userInfo.semesterid
const jwtToken = localStorage.getItem('jwtToken')
const Delete = async (row) => {
	let res = await delClass(jwtToken, row.cid)
	console.log(res)
	if (res.status == 200) {
		location.reload()
	} else ElMessage.error('删除失败')
}
const updatestudents = async () => {
	let handdata = {
		classNum: classnum_update.value,
		college: college_update.value,
		grade: grade_update.value,
		major: major_update.value,
		tid: tid,
		term: term,
	}
	console.log('hand', handdata)

	let res = await handaddClass(jwtToken, handdata)
	if (res.data.code == 11250) {
		ElMessage.error('重复上传')
	} else if (res.status == 200) {
		ElMessage({
			message: '上传成功',
			type: 'success',
		})
		location.reload()
	} else ElMessage.error('上传失败')
	console.log('handres', res)
} //上传学生
const changeFile = (file) => {
	File.value = file
}
const classList = ref([
	{
		cid: 1,
		name: '液体粘滞系数的测定',
		exps: [],
	},
	{
		cid: 2,
		name: '液体表面张力系数的测定',
		exps: [],
	},
	{
		cid: 3,
		name: '刚体转动惯量的测定',
		exps: [],
	},
	{
		cid: 4,
		name: '震动法测材料的杨氏模量',
		exps: [],
	},
	{
		cid: 9,
		name: '刚体转动惯量的测定',
		exps: [],
	},
	{
		cid: 10,
		name: '密立根油滴实验',
		exps: [],
	},
	{
		cid: 15,
		name: '声速的测定',
		exps: [],
	},
	{
		cid: 16,
		name: '用牛顿环仪测量透镜的曲率半径',
		exps: [],
	},
	{
		cid: 17,
		name: '迈克尔逊干涉仪的调节与使用',
		exps: [],
	},
	{
		cid: 19,
		name: '用分光计测光波波长',
		exps: [],
	},
])
const result = ref([
	{
		major: '环境科学',
		className: '2',
	},
	{
		major: '环境科学',
		className: '3',
	},
])
// 跳转到学生
const handleClick = (row) => {
	router.push({ path: '/exp-manage/studentList', query: { cid: row.cid } })
}
onMounted(() => {
	console.log(localStorage.getItem('jwtToken'), 'session是')

	console.log('store', store.userInfo.tid)

	getClass(jwtToken, 1).then((res) => {
		result.value = res.data.data
		result.value = result.value.map((item) => ({
			cid: item.cid,
			name: `${item.major}${item.classNum}班`,
			state: 0,
		}))
		console.log('处理后的result', result.value)
		// 处理classList的数据
		classList.value = classList.value.map((classInfo) => ({
			id: classInfo.id,
			name: classInfo.name,
			exps: result.value,
			state: '0',
		}))
	})
})
// 点击勾选
const handleSelect = (scope) => {
	console.log(scope)
}
const handleSelectionChange = (scope) => {
	console.log(multipleSelection.value)
	console.log(scope)
}
// 发布实验
const publish = (row) => {
	// console.log(row)
	// postEx(row).then((res) => {
	// 	console.log(res)
	// })
	ElMessage.success('发布成功')
}
const UpdateFile = () => {
	//console.log(uploadRef)
	let formData = new FormData()
	formData.append('tid', tid)
	formData.append('file', File.value.raw)
	console.log(formData.get('tid'))
	uploadClassFile(jwtToken, formData).then((res) => {
		console.log('文件上传结果：', res)
		if (res.status == 200) {
			location.reload()
			ElMessage({
				message: '上传成功',
				type: 'success',
			})
		} else {
			ElMessage.error('文件上传失败')
		}
	})
} //文件上传
const handleExceed = () => {
	ElMessage.error('一次只能上传一个文件')
} //上传多个文件会报错
</script>

<style lang="scss" scoped>
#all {
	display: flex;
	justify-content: space-between;

	#left {
		width: 500px;
		margin-right: 30px;
	}

	#right {
		.upload {
			margin-left: 10px;
			margin-top: 8px;
		}
	}
}
</style>